<template>
  <div class="app">
    <h2>当前sum1为：{{ sum1 }}</h2>
		<h2>当前sum2为：{{ sum2 }}--sum2是不能修改的</h2>
		<h2>当前car1为：{{ car1 }}</h2>
		<h2>当前car2为：{{ car2 }}</h2>
		<button @click="changeSum1">点我sum1+1</button>
		<button @click="changeSum2">点我sum2+1</button>
		<button @click="changeBrand2">修改品牌(car2)</button>
		<button @click="changeColor2">修改颜色(car2)</button>
		<button @click="changePrice2">修改价格(car2)</button>
  </div>
</template>

<script lang="ts" setup name="App">
import { ref,reactive,readonly,shallowReadonly } from "vue";
let sum1 = ref(0)
	let sum2 = readonly(sum1)
	let car1 = reactive({
		brand:'奔驰',
		options:{
			color:'红色',
			price:100
		}
	})
	let car2 = shallowReadonly(car1)

const changeSum1 = () => sum1.value++
//sum2是不能修改的
const changeSum2 = () => sum2.value++
//car2的品牌是不能修改的
const changeBrand2 = () => car2.brand = '宝马'
const changeColor2 = () => car2.options.color = '绿色'
const changePrice2 = () => car2.options.price += 10
/* ****************** */
/*
### **`readonly`**
1. 作用：用于创建一个对象的深只读副本。
2. 用法：
   const original = reactive({ ... });
   const readOnlyCopy = readonly(original);
3. 特点：
   * 对象的所有嵌套属性都将变为只读。
   * 任何尝试修改这个对象的操作都会被阻止（在开发模式下，还会在控制台中发出警告）。
4. 应用场景：
   * 创建不可变的状态快照。
   * 保护全局状态或配置不被修改。

### **`shallowReadonly`**
1. 作用：与 `readonly` 类似，但只作用于对象的顶层属性。
2. 用法：
   const original = reactive({ ... });
   const shallowReadOnlyCopy = shallowReadonly(original);
3. 特点：
   * 只将对象的顶层属性设置为只读，对象内部的嵌套属性仍然是可变的。
   * 适用于只需保护对象顶层属性的场景。
*/
</script>


<style scoped>
.app {
  background-color: #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  padding: 10px;
}

button {
  margin: 0 5px;
}
</style>